<script>
import { ref } from 'vue'
import StartWav from '@/assets/audio/start.wav'
import TipWav from '@/assets/audio/tip.wav'
import ClearWav from '@/assets/audio/clear.wav'
import WinWav from '@/assets/audio/win.wav'
import RefreshWav from '@/assets/audio/refresh.wav'
import LossWav from '@/assets/audio/loss.wav'
export default {
  props: {
    size: {
      type: Number,
      default() {
        return 64
      }
    },
    sound: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  setup(props) {
    const world = ref([])
    const spriteTypes = ref([])
    const selection = ref([])
    const cell = ref(props.size / 8)
    const playSound = (wav) => {
      if (!props.sound) {
        return
      }
      const audio = document.createElement('audio')
      audio.src = wav
      audio.autoplay = true
    }
    // let startTime = null
    const selectable = (sprite) => {
      for(let i=0; i<world.value.length; i++) {
        const item = world.value[i]
        // 是否重叠
        if (item.z > sprite.z && Math.abs(item.x - sprite.x) < 8 && Math.abs(item.y - sprite.y) < 8) {
          return false
        }
      }
      return true
    }
    const start = (map, types) => {
      playSound(StartWav)
      const nw = []
      const empty = []
      map.forEach(element => {
        if (element.fixed) {
          nw.push(element)
        } else {
          empty.push(element)
        }
      })

      types.forEach((element, type) => {
        for(let i=0; i<element; i++) {
          const random = parseInt(Math.random() * 10000 % empty.length)
          const sprite = empty[random]
          empty.splice(random, 1)
          nw.push({ ...sprite, type: type })
        }
      })
      nw.forEach((sprite, i) => sprite.id = i)
      world.value = nw
      world.value.forEach(sprite => sprite.selectable = selectable(sprite))
      selection.value = []
      // startTime = new Date()
    }

    const shuffle = () => {
      // const audio = document.createElement('audio')
      // audio.src = RefreshWav //require('@/assets/audio/tip.wav')
      // audio.autoplay = true
      playSound(RefreshWav)
      const nw = world.value.filter(sprite => sprite.fixed)
      const free = world.value.filter(sprite => !sprite.fixed)
      free.forEach(sprite => {
        const random = parseInt(Math.random() * 10000 % free.length)
        const s = free[random]
        const type = s.type
        s.type = sprite.type
        sprite.type = type
      })
      world.value = [...nw, ...free]
    }

    const handleSelect = (sprite, i) => {
      if (!sprite.selectable || selection.value.length >= 7) {
        return
      }
      // const audio = document.createElement('audio')
      // audio.src = TipWav//require('@/assets/audio/tip.wav')
      // audio.autoplay = true
      playSound(TipWav)
      world.value.splice(i, 1)
      selection.value.push(sprite)
      world.value.forEach(sprite => sprite.selectable = selectable(sprite))
      // count
      const filtered = selection.value.filter(s => s.type != sprite.type)
      if (filtered.length + 3 <= selection.value.length) {
        window.setTimeout(() => {
          selection.value = filtered
          if (world.value.length === 0) {
            // const audio = document.createElement('audio')
            // audio.src = WinWav//require('@/assets/audio/tip.wav')
            // audio.autoplay = true
            playSound(WinWav)
            window.setTimeout(()=>alert('顺利完成'), 200)
            return
          }
          // const audio = document.createElement('audio')
          // audio.src = ClearWav // require('@/assets/audio/clear.wav')
          // audio.autoplay = true
          playSound(ClearWav)
        }, 100)
        
        return
      }
      // Loss？
      if (selection.value.length >= 7) {
        // const audio = document.createElement('audio')
        // audio.src = LossWav//require('@/assets/audio/tip.wav')
        // audio.autoplay = true
        playSound(LossWav)
        window.setTimeout(()=>alert('槽位已满'), 200)
      }
    }
  
    return { world, spriteTypes, selection, cell, start, shuffle, handleSelect }
  }
}
</script>

<template>
  <div class="game">
    <div class="game-world">
      <div v-for="(sprite, i) in world" :key="sprite.id" :style="{ width: `${size}px`, height: `${size}px`, left: `${sprite.x * cell}px`, top: `${sprite.y * cell}px`, zIndex: sprite.z }" class="game-sprite">
        <div class="game-sprite-content">
          <img :src="require(`@/assets/sprites/${sprite.type}.png`)" @click="handleSelect(sprite, i)" />
          <div v-if="!sprite.selectable" class="game-sprite-cover" :style="{ height: `${size}px` }"></div>
        </div>
      </div>
    </div>
    <div class="game-selection" :style="{ top: `${size * 8}px`}">
      <transition-group enter-active-class="animate__animated animate__slideInDown animate__faster" leave-active-class="animate__animated animate__fadeOutDown">
      <div v-for="(sprite, i) in selection" :key="sprite.id" :style="{ width: `${size}px`, height: `${size}px`, left: `${i * size}px`, top: 0 }" class="game-sprite">
        <div class="game-sprite-content">
          <img :src="require(`@/assets/sprites/${sprite.type}.png`)" />
        </div>
      </div>
      </transition-group>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.game {
  &-world {
    position: relative;
  }
  &-selection {
    position: relative;
  }
  &-sprite {
    position: absolute;
    
    &-content {
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
      padding: 5px;
    }
    img {
      width: 100%;  
    }
    &-cover {
      opacity: 0.5;
      background: black;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }
  }
}
</style>
